<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>任务单</title>
  <script type="text/javascript" th:inline="JavaScript">
  </script>
</head>
<body>
  <div th:fragment="taskList">
    <!-- 任务单 -->
    <div class="cd-popup3 taskList taskList-pop" id="taskListModal">
      <div class="cd-popup-container3 taskListModal manageModal">
        <div class="modal-top"></div>
        <div class="modal-title">任务单</div>
        <a class="cd-popup-close closeModal" href="javascript:;"></a>
        <form class="taskListForm" id="taskListForm" enctype="application/json">
          <!-- 任务步骤盒子 -->
          <div class="taskSteps">
            <div class="taskStepsBegin">
              <i>报警</i>
              <span>开始</span>
              <div class="taskStepsBeginTime">
                <b style="font-size: 12px; font-weight: normal;">报警时间：</b>
                <b class="taskStepsBeginTimeText"></b>
              </div>
              <div class="verticalLine"></div>
            </div>
            <span class="line"></span>
            <s></s>
            <div class="taskStepsCurrent">
              <i>当前节点</i>
              <span>确认报警</span>
              <div class="taskStepsCurrentTab">
                <b style="text-align: right;">姓名：</b>
                <b style="text-align: left;" class="taskStepsCurrentTabInitiator"></b>
                <b style="text-align: right;">操作时间：</b>
                <b style="text-align: left;" class="taskStepsCurrentTabOperationTime"></b>
                <!-- <b style="text-align: right;">任务状态：</b><b style="text-align: left; color: #ffba00;" class="taskStepsCurrentTabTaskState">确认</b> -->

              </div>
              <div class="nextStepText">下一步</div>
              <div class="verticalLine"></div>
            </div>
            <div class="line"></div>
            <s></s>
            <div class="taskStepsThird">
              <span>等待任务确认</span>
            </div>
            <span class="line" style="margin-left:10px;"></span>
            <s></s>
            <div class="taskStepsForth">
              <!-- <i>等待上步操作</i> -->
              <span></span>
            </div>
          </div>
          <!-- 消火栓分布部分 -->
          <div class="fireHydrantDistribution">
            <div class="fireHydrantDistributionTitle" style="text-align: left; font-size: 16px;">消火栓分布:</div>
            <!-- <button type="button" class="fireHydrantDistributionMapBtn fireHydrantDistributionMapBtn-pop">地图展示</button> -->
            <div class="fireHydrantDistributionTabSmallBox fireHydrantDistributionTabSmallBoxItem_scroll" style="overflow: hidden; padding: 5px 0;">
              <div class="fireHydrantDistributionTabBigBox _panel-box">
              </div>
            </div>
          </div>
          <!-- 周边协同点部分 -->
          <div class="cooPointAround fr">
            <div class="cooPointAroundTitle" style="text-align: left; font-size: 16px;">协同点:</div>
            <div class="cooPointAroundTabSmallBox cooPointAroundTabSmallBoxItem_scroll" style="overflow: hidden;">
              <div class="cooPointAroundTabBigBox _panel-box">
              </div>
            </div>
          </div>
          <!-- 协同内容部分 -->
          <div class="cooContent">
            <div class="cooContentTitle" style="text-align: left; font-size: 16px;">协同内容:</div>
            <div class="cooContentTabBox">
              <div class="fl">
                <label>
                  <i></i>
                  <input type="checkbox" style="display: none;">
                </label>
                <span>需要现场查看确认</span>
              </div>
              <div class="fl">
                <label>
                  <i></i>
                  <input type="checkbox" style="display: none;">
                </label>
                <span>需要人员支援</span>
              </div>
              <div class="fl">
                <label>
                  <i></i>
                  <input type="checkbox" style="display: none;">
                </label>
                <span>需要灭火器</span>
              </div>
              <div class="fl">
                <label>
                  <i></i>
                  <input type="checkbox" style="display: none;">
                </label>
                <span>需要破拆工具</span>
              </div>
              <div class="fl">
                <label>
                  <i></i>
                  <input type="checkbox" style="display: none;">
                </label>
                <span>需要水带、水枪</span>
              </div>
              <div class="fl">
                <label>
                  <i></i>
                  <input type="checkbox" style="display: none;">
                </label>
                <span>需要现场维稳</span>
              </div>
              <div class="fl">
                <label>
                  <i></i>
                  <input type="checkbox" style="display: none;">
                </label>
                <span>需要防护设备</span>
              </div>
              <div class="fl">
                <label>
                  <i></i>
                  <input type="checkbox" style="display: none;">
                </label>
                <span>需要消防梯</span>
              </div>
            </div>
          </div>
          <!-- 协同处理人数据部分 -->
          <div class="taskListData fr">
            <div class="taskListDataAlarmContact" style="text-align: left; font-size: 16px;">报警联系人:</div>
            <div class="taskListDataAlarmContactBox mb12">
              <span class="taskListDataAlarmContact1"></span>
              <i class="taskListDataAlarmContactNum1"></i>
              <span class="taskListDataAlarmContact2"></span>
              <i class="taskListDataAlarmContactNum2"></i>
              <span class="taskListDataAlarmContact3"></span>
              <i class="taskListDataAlarmContactNum3"></i>
            </div>
            <div class="taskListDataRow mb12">
              <span>报警地点 :</span>
              <input type="text" class="notEmptyInput taskListDataAlarmAddress disabledStyle" autocomplete="off" disabled>
            </div>
          </div>
          <!-- 备注部分 -->
          <div class="taskListRemark clearfix">
            <span class="taskListRemarkTitle">备注：</span>
            <textarea rows='4' clos='30' class="taskListRemarkContent taskListRemark-pop"></textarea>
          </div>
          <!-- 按钮盒子 -->
          <div class="taskListBtnBox">
            <button type="submit" class="taskListSendBtn taskListSendBtn-pop" style="background-color: #70abe1;border: none; margin-right: 100px;">发送</button>
            <button type="button" class="taskListCancelBtn taskListCancelBtn-pop cd-popup-close1" style="background-color: #768fa5;border: none;">取消</button>
          </div>
        </form>
      </div>
    </div>
    <!-- 任务跟踪单 -->
    <div class="cd-popup3 orderTracking orderTracking-pop" id="orderTrackingModal">
      <div class="cd-popup-container3 orderTrackingModal manageModal">
        <div class="modal-top"></div>
        <div class="modal-title">任务跟踪单</div>
        <a class="cd-popup-close closeModal" href="javascript:;"></a>
        <form class="orderTrackingForm clearfix" id="orderTrackingForm" enctype="application/json">
          <!-- 任务步骤盒子 -->
          <div class="taskSteps">
            <div class="taskStepsBegin">
              <i>报警</i>
              <span>开始</span>
              <div class="taskStepsBeginTime">
                <b style="font-size: 12px; font-weight: normal;">报警时间：</b>
                <b class="taskStepsBeginTimeText"></b>
              </div>
              <div class="verticalLine"></div>
            </div>
            <span class="line"></span>
            <s></s>
            <div class="taskStepsCurrent">
              <span>确认报警</span>
              <div class="taskStepsCurrentTab">
                <b style="text-align: right;">姓名：</b>
                <b style="text-align: left;" class="taskStepsCurrentTabInitiator"></b>
                <b style="text-align: right;">操作时间：</b>
                <b style="text-align: left;" class="taskStepsCurrentTabOperationTime"></b>
                <!-- <b style="text-align: right;">任务状态：</b><b style="text-align: left; color: #ffba00;" class="taskStepsCurrentTabTaskState">确认</b> -->
              </div>
              <div class="verticalLine"></div>
              <div class="nextStepText">下一步</div>
            </div>
            <div class="line"></div>
            <s></s>
            <div class="taskStepsThird">
              <i class="curr">当前节点</i>
              <span class="curr1">等待任务确认</span>
              <div class="taskStepsStates">
                <b style="font-size: 12px; font-weight: normal; text-align: right;">拒绝：</b>
                <b style="color: #f03c13;" class="taskStepsStates1">0人</b>
                <b style="font-size: 12px; font-weight: normal; text-align: right;">应答：</b>
                <b style="color: #13f018;" class="taskStepsStates2">0人</b>
                <b style="font-size: 12px; font-weight: normal; text-align: right;">未应答：</b>
                <b style="color: #f0bf13;" class="taskStepsStates3">0人</b>
              </div>
              <div class="verticalLine"></div>
            </div>
            <span class="line" style="margin-left:10px;"></span>
            <s></s>
            <div class="taskStepsForth">
              <i class="none curr">当前节点</i>
              <i class="taskStepsForthEndText" style="font-size: 14px; color: #fff; position: absolute; top: 14px; left: 12px;  width: 34px; height: 10px; display: none;">结束</i>
              <span></span>
            </div>
          </div>
          <!-- 周边协同点部分 -->
          <div class="cooPointAround">
            <div class="cooPointAroundTitle" style="text-align: left; font-size: 16px;">协同点:</div>
            <div class="cooPointAroundTabSmallBox cooPointAroundTabSmallBoxItem_scroll" style="overflow: hidden;">
              <div class="cooPointAroundTabBigBox _panel-box">
              </div>
            </div>
          </div>
          <!-- 协同内容部分 -->
          <div class="cooContent fr">
            <div class="cooContentTitle" style="text-align: left; font-size: 16px;">协同内容:</div>
            <div class="cooContentTabBox" style="font-size: 12px;">
              <!-- <div class="fl">
                  <label>
                    <i></i>
                    <input type="checkbox" style="display: none;">
                  </label>
                  <span>1、发生火灾</span>
                </div> -->
            </div>
          </div>
          <!-- 备注部分 -->
          <div class="orderTrackingRemark clearfix">
            <span class="taskListRemarkTitle">备注：</span>
            <textarea rows='4' clos='30' class="taskListRemarkContent taskListRemark-pop" disabled></textarea>
          </div>
          <!-- 按钮盒子 -->
          <div class="orderTrackingBtnBox">
            <button type="button" class="orderTrackingEndBtn orderTrackingEndBtn-pop" style="background-color: #70abe1;border: none; margin-right: 100px;">结束任务</button>
            <button type="button" class="orderTrackingCancelBtn orderTrackingCancelBtn-pop" style="background-color: #768fa5;border: none;">取消</button>
          </div>
        </form>
      </div>
      </div>
    </div>
  </div>
</body>

</html>